<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
         p{
            position: absolute;
            left:420px; top: 50px;
            padding: 10px 30px;
            color: white;
            font-size: 20px;
            font-family: "Microsoft Yahei";
            
        }
        #canvas{
            cursor: pointer;
            background:#000;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
     <p id="record">当前的速度为：</p>
    <script src='../js/ball.js'></script>
    <script src="../js/arrow.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            var oP = document.getElementById('record');

            canvas.width = document.body.clientWidth;
            canvas.height = window.screen.availHeight*0.8;
            
            var ball = new Ball(30, "orange"),
               vx = Math.random()*10 + 5,
               vy = -10,
               bounce = -0.8,
               gravity = 1.8,
               speed, //speed 用于记录速度值
               oldX, oldY; //定义变量oldX, oldY

            var isMouseDown = false,
               mouse = utils.captureMouse(canvas),
               w = 0, h = 0;
               
               ball.x = canvas.width/2;
               ball.y = canvas.height/2;    

            canvas.addEventListener("mousedown", function(event){
               if(utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)){
                   w = mouse.x - ball.x;
                   h = mouse.y - ball.y;
                   
                  //如果点击到了小球上，那么分别将小球的位置赋值给oldX, oldY
                  //并且随着小球的移动oldX和oldY每一帧都在刷新
                   oldX = ball.x;
                   oldY = ball.y;
                   
                   isMouseDown = true;
                   
                   canvas.addEventListener('mouseup', onMouseUp ,false);
                   canvas.addEventListener('mousemove', onMouseMove, false);
               }
             }, false); 
             
           function onMouseUp(event){
               isMouseDown = false;
               canvas.removeEventListener('mouseup', onMouseUp ,false);
               canvas.removeEventListener('mousemove', onMouseMove, false);
           }
           function onMouseMove(event){
               ball.x = mouse.x - w;
               ball.y = mouse.y - h;
           }

             //计算抛出速度
           function trackVelocity(){
               //用当前小球的位置减去上一帧的坐标
               vx = ball.x - oldX;
               vy = ball.y - oldY;
               
               //重新赋予oldX和oldY
               oldX = ball.x;
               oldY = ball.y;
        
               speed = Math.sqrt(vx*vx + vy*vy);
               oP.innerHTML = "当前的速度为："+speed.toFixed();
           } 
            
            function checkBoundries(){
               var left = canvas.width,
                   right = 0,
                   top = 0,
                   bottom = canvas.height;
               
               ball.x += vx;
               vy += gravity;
               ball.y += vy;
               
               if(ball.x + ball.radius > left){
                   vx *= bounce;
                   ball.x = left - ball.radius;
               }else if(ball.x - ball.radius < right){
                   vx *= bounce;
                   ball.x = ball.radius; 
               }
               
               if(ball.y + ball.radius > bottom){
                   vy *= bounce;
                   ball.y = bottom - ball.radius;
               }else if(ball.y - ball.radius < top){
                   vy *= bounce;
                   ball.y = ball.radius;
               }
           }


           (function drawFrame(){
               window.requestAnimationFrame(drawFrame, canvas);
               context.clearRect(0, 0, canvas.width, canvas.height);
               
               if(!isMouseDown){
                   checkBoundries();
               }else{
                   trackVelocity();
               }
              
               ball.draw(context);
           }());
          
        }


        //得到球体坐标
        /*Ball.prototype.getBounds = function(){
            return {
                x: this.x - this.radius,
                y: this.y - this.radius,
                width: this.radius*2,
                height: this.radius*2
            };
        }
        //捕获物体
        utils.containsPoint = function(rect, x, y){
            return !(x<rect.x || x>rect.x + rect.width ||
                     y<rect.y || y>rect.y + rect.height);
        }

        //物体的移动拖拽
        canvas.addEventListener("mousedown", function(event){
              if(utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)){
                    ...
                    canvas.addEventListener('mouseup', onMouseUp ,false);
                    canvas.addEventListener('mousemove', onMouseMove, false);
                   }
              }, false);


        //理解物体的抛扔的概念
        vx = ball.x - oldX;
        vy = ball.y - oldY*/
    </script>
</body>
</html>
